<template>
  <a @click="dialog = true">
    <span>设置</span>
    <a-modal v-model="dialog" title="设置日期" :width="1000" @ok="submit">
      <a-form-model :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <h1>贷款限额费:</h1>
        <div class="grid grid-cols-2">
          <a-form-model-item label="贷款限额费付款方式：">
            <a-select v-model="form.limitPayType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="贷款限额费：">
            <a-input v-model="form.limitRate" addon-after="%" disabled />
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2">
          <a-form-model-item label="生效开始日期：">
            <a-date-picker v-model="limitFeeStart" disabled />
          </a-form-model-item>

          <a-form-model-item label="生效日期：">
            每月<a-input-number v-model="form.limitDay" disabled :min="0" />号
          </a-form-model-item>
        </div>
        <a-divider />
        <h1>出借人手续费:</h1>
        <div class="grid grid-cols-2">
          <a-form-model-item label="出借人手续费付款方式：">
            <a-select v-model="form.commissionPayType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="出借人手续费：">
            <a-input v-model="form.commissionRate" addon-after="%" disabled />
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2">
          <a-form-model-item label="生效开始日期：">
            <a-date-picker
              v-model="commissionStart"
              @change="commissionChange"
              :disabled-date="disabledDate"
              :disabled="Archive == 1"
            />
          </a-form-model-item>
        </div>
        <a-divider />
        <h1>其他费用:</h1>
        <div class="grid grid-cols-2">
          <a-form-model-item label="其他费用付款方式：">
            <a-select v-model="form.otherPayType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="其他费用：">
            <a-input v-model="form.otherAmount" disabled />
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2" v-if="form.otherPayType != 1">
          <a-form-model-item label="生效开始日期：" v-if="form.otherPayType == 2 || form.otherPayType == 3">
            <a-date-picker v-model="otherFeeStart" disabled />
          </a-form-model-item>
          <a-form-model-item label="生效开始日期：" v-else>
            <a-date-picker
              v-model="otherFeeStart"
              @change="otherFeeChange"
              :disabled-date="disabledDate"
              :disabled="Archive == 1"
            />
          </a-form-model-item>

          <a-form-model-item label="生效日期：" v-if="form.otherPayType == 2 || form.otherPayType == 3">
            每月<a-input-number v-model="form.otherDay" disabled :min="0" />号
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
  </a>
</template>
<script>
import { limitFeeTypes } from '@/dict'
import { getloanDelay, updataloanDelay, getList, getDetailList } from '@/api/common'
import moment from 'moment'
export default {
  name: 'setData',
  props: ['record'],
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
      Archive: 0,
      id: '',
      dialog: false,
      start: null,
      limitFeeTypes,
      limitFeeStart: '',
      commissionStart: '',
      otherFeeStart: '',
      form: {
        limitPayType: 1,
        limitRate: '',
        limitStartDate: '',
        limitDay: '',
        commissionPayType: 1,
        commissionRate: '',
        commissionStartDate: '',
        otherPayType: 1,
        otherAmount: '',
        otherStartDate: '',
        otherDay: ''
      }
    }
  },
  watch: {
    dialog(v) {
      this.getData()
    }
  },
  methods: {
    submit() {
      this.dialog = false
    },
    disabledDate(endValue) {
      const startValue = this.start
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // limitFeeChange() {
    //   this.form.limitDay = moment(this.limitFeeStart).date()
    //   this.form.limitStartDate = Number(
    //     moment(this.limitFeeStart)
    //       .startOf('day')
    //       .format('X')
    //   )
    //   const _form = {}
    //   _form.limitStartDate = this.form.limitStartDate
    //   _form.limitDay = this.form.limitDay
    //   // _form.id = id
    //   if (_form.limitStartDate != 0) {
    //     updataloanDelay(this.id, _form)
    //   }
    // },
    commissionChange() {
      const commissionDay = moment(this.commissionStart).date()
      this.form.commissionStartDate = moment(this.commissionStart)
        .startOf('day')
        .format('X')
      const _data = {}
      _data.commissionPayDate = this.form.commissionStartDate
      _data.commissionDay = commissionDay
      // _data.id = id
      if (_data.commissionStartDate != 0) {
        updataloanDelay(this.id, _data)
      }
    },
    otherFeeChange() {
      this.form.otherDay = moment(this.otherFeeStart).date()
      this.form.otherStartDate = Number(
        moment(this.otherFeeStart)
          .startOf('day')
          .format('X')
      )

      const _form = {}
      if (this.form.otherPayType == 2 || this.form.otherPayType == 3) {
        _form.otherStartDate = this.form.otherStartDate
      } else if (this.form.otherPayType == 4) {
        _form.otherPayDate = this.form.otherStartDate
      }
      _form.otherDay = this.form.otherDay
      // _form.id = id
      if (_form.otherStartDate != 0) {
        updataloanDelay(this.id, _form)
      }
    },
    async getData() {
      const id = this.$route.query.id
      const r = await getDetailList(id)
      this.Archive = r.result.data.Archive
      const form = {
        id: this.record.id
      }
      const res = await getloanDelay(form)
      this.form = res.result.data.list[0]
      this.id = this.form.id
      // console.log(form)
      if (this.form.limitStartDate) {
        this.limitFeeStart = moment(this.form.limitStartDate * 1000) || '--'
        this.form.limitDay = this.form.limitDay
      }
      if (this.form.commissionPayDate) {
        this.commissionStart = moment(this.form.commissionPayDate * 1000) || '--'
      }

      if (this.form.otherPayType == 2 || this.form.otherPayType == 3) {
        this.otherFeeStart = this.form.otherStartDate ? moment(this.form.otherStartDate * 1000) || '--' : ''
      } else if (this.form.otherPayType == 4) {
        {
          this.otherFeeStart = this.form.otherPayDate ? moment(this.form.otherPayDate * 1000) || '--' : ''
        }
      }
      const _form = {
        page: 1,
        limit: 1,
        projectIds: this.$route.query.id
      }
      const resTime = await getList(_form)
      const Time = resTime.result.data.list[0]
      this.start = Time.firstLoanTime ? moment(Time.firstLoanTime * 1000) : null
      // if (!this.form.limitDay) {
      //   this.form.limitDay = ''
      // }
      // if (!this.form.otherDay) {
      //   this.form.otherDay = ''
      // }
    }
  }
}
</script>
<style lang="scss" scoped></style>
